<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'message' }"
			@click="onTabClick('message')">
			<text class="tab-view-item--text">考试</text>
		</view>
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'practice' }"
			@click="onTabClick('practice')">
			<text class="tab-view-item--text">练习</text>
		</view>
		<view class="tab-view-item"
			id="2"
			:data-current="2"
			:class="{ 'active': active == 'homework' }"
			@click="onTabClick('homework')">
			<text class="tab-view-item--text">作业</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 考试 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list v-if="testList.length" :border="false">
				<message-card v-for="item in testList"
					:key="item.id"
					:item="item"
					@on-item="() => onItemClick('message', 'message', item)">
				</message-card>
			</uni-list>
			<view v-else class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 练习 -->
		<swiper-item style="overflow-y: auto;">
			<view class="padding">
				<view class="list-item-large sec-top"
					@click="onTaskClick('practice', 'exam')">
					<view class="list-item-title">历史真题</view>
					<text class="iconfont icon-right-arrow text-custom"></text>
				</view>
				<view class="list-item-large sec-top"
					@click="onTaskClick('homework', 'practice')">
					<view class="list-item-title">章节练习</view>
					<text class="iconfont icon-right-arrow text-custom"></text>
				</view>
				<view class="list-item-large sec-top"
					@click="onTaskClick('homework', 'record')">
					<view class="list-item-title">练习记录</view>
					<text class="iconfont icon-right-arrow text-custom"></text>
				</view>
				<view class="list-item-large sec-top"
					@click="onTaskClick('practice', 'remarked')">
					<view class="list-item-title">错题本</view>
					<text class="iconfont icon-right-arrow text-custom"></text>
				</view>
				<view class="list-item-large sec-top"
					@click="onTaskClick('practice', 'collect')">
					<view class="list-item-title">收藏夹</view>
					<text class="iconfont icon-right-arrow text-custom"></text>
				</view>
			</view>
		</swiper-item>
		<!-- 作业 -->
		<swiper-item style="overflow-y: auto;">
			<uni-collapse>
				<uni-collapse-item
					v-for="item in homeworkList"
					:key="item.id"
					:title="item.title"
					show-animation>
					<view class="detail-content"
						v-for="titem in item.tasks"
						:key="titem.id">
						<view class="task-item-info"
							@click="onItemClick('homework', 'detail', titem)">
							<view class="task-item-type">
								<text class="iconfont icon-practice large"></text>
							</view>
							<view class="task-item-describe sec-left">
								<view class="task-item-date">
									<text>{{ titem.title }}</text>
								</view>
								<view class="task-item-author">
									<text>共100题，</text>
									<text class="sec-left">已做</text>
									<text class="text-primary">0</text>题。
								</view>
							</view>
						</view>
						<!-- <view class="task-list sec-top detail-white">
							<view class="task-item border"
								@click="onItemClick('homework', 'detail', { id: 1 })">
								<view class="task-item-content text-custom">
									<text>2020-12-11 20:00</text>
									<text class="sec-left">90分</text>
								</view>
								<view class="task-item-action">
									<text class="text-primary">查看成绩</text>
								</view>
							</view>
						</view> -->
					</view>
					<!-- <view class="detail-content">
						<view class="task-item-info"
							@click="onItemClick('homework', 'detail', { id: 1 })">
							<view class="task-item-type">
								<text class="iconfont icon-practice large"></text>
							</view>
							<view class="task-item-describe sec-left">
								<view class="task-item-date">
									<text>练习一</text>
								</view>
								<view class="task-item-author">
									<text>共100题，</text>
									<text class="sec-left">已做</text>
									<text class="text-primary">0</text>题。
								</view>
							</view>
						</view>
						<view class="task-list sec-top detail-white">
							<view class="task-item border"
								@click="onItemClick('homework', 'detail', { id: 1 })">
								<view class="task-item-content text-custom">
									<text>2020-12-11 20:00</text>
									<text class="sec-left">90分</text>
								</view>
								<view class="task-item-action">
									<text class="text-primary">查看成绩</text>
								</view>
							</view>
						</view>
					</view> -->
				</uni-collapse-item>
			</uni-collapse>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
	</swiper>
	<!-- picker -->
	<mpvue-picker
		:themeColor="themeColor"
		ref="mpvuePicker"
		:mode="mode"
		:deepLength="deepLength"
		:pickerValueDefault="pickerValueDefault"
		@onConfirm="onConfirm"
		@onCancel="onCancel"
		:pickerValueArray="pickerValueArray">
	</mpvue-picker>
</view>
</template>

<script>
import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
import MessageCard from './message-card.vue';
import { getMyTask } from '@/api/index.js';
export default {
	components: {
		mpvuePicker,
		MessageCard
	},
	data() {
		return {
			active: 'practice',
			tabIndex: 1,
			tabs: ['message', 'practice', 'homework'],
			pickerValueArray: [
				{
					label: '初一',
					value: 1
				},
				{
					label: '初二',
					value: 2
				},
				{
					label: '初三',
					value: 3
				}
			],
			themeColor: '#007AFF',
			mode: '',
			deepLength: 1,
			pickerValueDefault: [0],
			testList: [],
			homeworkList: []
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		this.setStyle(0, '初一');
		getMyTask('testpaper').then(res => {
			this.testList = res.list || [];
		})
		getMyTask('homework').then(res => {
			this.homeworkList = res.list || [];
		})
	},
	methods: {
		onTaskClick(module, type) {
			uni.navigateTo({
				url: `/pages/${ module }/${ module }?type=${ type }&from=task`
			});
		},
		onItemClick(module, type, item) {
			uni.navigateTo({
				url: `/pages/${ module }/${ type }?id=${ item.id }&from=task`
			});
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'message':
					this.tabIndex = 0;
					break;
				case 'homework':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 1;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		},
		// 单列
		showSinglePicker() {
			this.mode = 'selector';
			this.deepLength = 1;
			this.pickerValueDefault = [0];
			this.$refs.mpvuePicker.show();
		},
		onConfirm(e) {
			this.setStyle(0, e.label);
		},
		onCancel() {},
		/**
		 * 修改导航栏buttons
		 * index[number] 修改的buttons 下标索引，最右边索引为0
		 * text[string] 需要修改的text 内容
		 */
		setStyle(index, text) {
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			if (text.length > 3) {
				text = text.substr(0, 3) + '...';
			}
			// #ifdef APP-PLUS
			let currentWebview = page.$getAppWebview();
			let titleNView = currentWebview.getStyle().titleNView;
			// 添加文字过长截取为3个字符，请根据自己业务需求更改
			titleNView.buttons[0].text = text;
			currentWebview.setStyle({
				titleNView: titleNView
			});
			// #endif
			// #ifdef H5
			// h5 临时方案
			document.getElementsByClassName('uni-btn-icon')[1].innerText = text;
			// #endif
		}
	},
	// 搜索框
	onNavigationBarSearchInputClicked(e) {
		uni.navigateTo({
			url: '/pages/subject/result?from=index'
		})
	},
	// 按钮
	onNavigationBarButtonTap(button) {
		if (button.index == 0) {
			this.showSinglePicker();
		}
	}
}
</script>
